<template>
    <div class="bgpicture" v-if="showimage" @click="closeclose">
        <div class="close_picture" @click="closeclose">x</div>
        <div
        @mousedown="move"
        @click.stop="movemove"
        @mousewheel.prevent="rollImg"
        class="c_picture"
        ref="changepic">
            <div ref="rotatepic">
                <el-image
                    fit="fill"
                    :src="urlimg" 
                    >
                    <div slot="error" class="image-slot"></div>
                </el-image>
            </div>
        </div>
        <div class="b_picture el-image-viewer__actions__inner">
            <i class="el-icon-back" @click.stop="goback"></i>
            <i class="el-icon-zoom-out" @click.stop="small"></i>
            <i class="el-icon-zoom-in" @click.stop="big"></i>
            <i class="el-icon-refresh-left" @click.stop="turnleft"></i>
            <i class="el-icon-refresh-right" @click.stop="turnright"></i>
            <i class="el-icon-right" @click.stop="goon"></i>
        </div>
        <div class="markcss" v-if="isone">已 是 第 一 张</div>
        <div class="markcss" v-if="istwo">已 是 最 后 一 张</div>
    </div>
</template>
<script>
export default {
    name: 'morePicture',
    props: {
        // 自定义类名
        className: {
            type: String
        },
        //url
        url:{
            type: String
        },
        imglist:{
            type: Array
        },
        //是否显示
        showimage:{
            type: Boolean,
            default: false
        },
        //是否第一张
        isfirst:{
            type: Boolean,
            default: false
        },
        //是否最后一张
        islast:{
            type: Boolean,
            default: false
        },
        //旋转角度
        deg:{
            type: Number,
            default: 0
        },
        num:{
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            x:0,
            y:0,
            degtwo: 0,
            urlimg:"",
            number:0,
            isone:false,
            istwo:false,
        }
    },
    watch: {
        url(){
            this.urlimg = this.url;
            this.number = this.num;
            this.isone = this.isfirst;
            this.istwo = this.islast;
            this.degtwo = this.deg;
        },
    },
    methods: {
        //点击任意地方 照片消失
        closeclose(){
            this.degtwo = 0;
            this.$emit('closeimage',this.showimage)
        },
        rollImg(){
            /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
            var zoom = parseInt(this.$refs.changepic.style.zoom) || 100; 
            /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
            zoom += event.wheelDelta / 12;
            /* 最小范围 和 最大范围 的图片缩放尺度 */ 
            if (zoom >= 30 && zoom <300) { 
                this.$refs.changepic.style.zoom = zoom + "%"; 
            }
            return false; 
        },
        //变大
        big(){
            /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
            var size = parseInt(this.$refs.changepic.style.zoom) || 100; 
            /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
            size += 10
            /* 最小范围 和 最大范围 的图片缩放尺度 */ 
            if (size >= 30 && size <300) { 
                this.$refs.changepic.style.zoom = size + "%"; 
            }
        },
        //变小
        small(){
            /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
            var size = parseInt(this.$refs.changepic.style.zoom) || 100; 
            /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
            size -= 10
            /* 最小范围 和 最大范围 的图片缩放尺度 */ 
            if (size >= 30 && size <300) { 
                this.$refs.changepic.style.zoom = size + "%"; 
            }
        },
        //向左旋转
        turnleft(){
            this.degtwo -= 90
            this.$refs.rotatepic.style.transform = `rotate(${this.degtwo}deg)`
            this.$refs.rotatepic.style.transition = `all 2s`
        },
        //向右旋转
        turnright(){
            this.degtwo += 90
            this.$refs.rotatepic.style.transform = `rotate(${this.degtwo}deg)`
            this.$refs.rotatepic.style.transition = `all 2s`
        },
        goback(){
            this.degtwo = 0;
            this.$refs.rotatepic.style.transform = `rotate(${this.degtwo}deg)`
            this.$refs.rotatepic.style.transition = `all 2s`
            this.istwo = false;
            if(this.number !== 0 && this.number>0){
                this.number--;
                this.urlimg = this.imglist[this.number]
                this.isone = false;
            }else if(this.number == 0){
                this.isone = true;
            }
        },
        goon(){
            this.degtwo = 0;
            this.$refs.rotatepic.style.transform = `rotate(${this.degtwo}deg)`
            this.$refs.rotatepic.style.transition = `all 2s`
            this.isone = false;
            if(this.number<this.imglist.length-1){
                this.number++;
                this.urlimg = this.imglist[this.number]
                this.istwo = false;
            }else if(this.number == this.imglist.length-1){
                this.istwo = true;
            }
        },
        //拖拽移动
        move(e){
            let disX = e.clientX - this.$refs.changepic.offsetLeft;
            let disY = e.clientY - this.$refs.changepic.offsetTop;
            document.onmousemove = (e)=>{
                let left = e.clientX -disX;
                let top = e.clientY -disY;
                // 绑定元素位置
                this.x = left;
                this.y = top;
                this.$refs.changepic.style.left = left + 'px';
                this.$refs.changepic.style.top = top + 'px';
            }
            document.onmouseup = (e)=>{
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
        //阻止父元素点击事件
        movemove(){
            document.onmousemove = null;
            document.onmouseup = null;
        },
    }
}
</script>

<style lang="scss">
    .bgpicture{
        z-index:9999;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.5);
    }
    .close_picture{
        position: absolute;
        top:100px;
        right:400px;
        width:40px;
        height:40px;
        line-height: 40px;
        font-size:22px;
        color:#ffffff;
        text-align: center;
        background-color: rgba(0,0,0,0.3);
        border-radius: 50%;
        z-index:9999;
    }
    .close_picture:hover{
        cursor: pointer;
    }
    .c_picture{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        max-width:400px;
        max-height:600px;
    }
    .markcss{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom:140px;
        font-size:20px;
        color:#ffffff;
    }
    .b_picture{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom:60px;
        width:282px;
        height:44px;
        padding:0 23px;
        border-color:#fff;
        border-radius: 22px;
        background-color: #606266;
    }
    .imgRight{
        width:150px;
        height:600px;
        text-align: center;
        position: fixed;
        /* top:100px;
        right:40px; */
        right:10%;
        top:50%;
        margin-top: -300px;
    }
    .imgRight_1{
        // width:140px;
        // height:140px;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
</style>
